// 这是用户界面联系我们 预约里面的内容

import { reactive } from 'vue'

interface FormTypes {
  visitorName: string
  phone: string
  email: string
  appointment: any[]
}

interface RulesTypes {
  visitorName: {
    required: boolean
    trigger: string
    type: string
    message: string
  }[]
  phone: (
    | {
        required: boolean
        trigger: string
        message: string
        validator?: undefined
      }
    | {
        validator: (rule: any, value: any, callback: any) => void
        trigger: string
        message: string
        required?: undefined
      }
  )[]
  email: (
    | {
        required: boolean
        trigger: string
        message: string
        type?: undefined
      }
    | {
        type: string
        trigger: string
        message: string
        required?: undefined
      }
  )[]
  appointment: {
    required: boolean
    trigger: string
    message: string
  }[]
}

// 表单数据
export const form = reactive<FormTypes>({
  visitorName: '',
  phone: '',
  email: '',
  appointment: []
})

// 验证手机号码是否合法
const validatePhone = (rule: any, value: any, callback: any) => {
  if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
    callback(new Error('输入手机号码格式有误'))
  } else {
    callback()
  }
}

// 表单验证规则
export const rules = reactive<RulesTypes>({
  visitorName: [
    { required: true, trigger: 'change', type: 'string', message: '请输入姓名' }
  ],
  phone: [
    { required: true, trigger: 'change', message: '请输入手机号' },
    {
      validator: validatePhone,
      trigger: 'change',
      message: '输入正确的手机号码'
    }
  ],
  email: [
    {
      required: true,
      trigger: 'change',
      message: '请输入邮箱地址'
    },
    {
      type: 'email',
      trigger: 'change',
      message: '请输入正确的邮箱地址'
    }
  ],
  appointment: [
    { required: true, trigger: 'change', message: '请选择预约时间段' }
  ]
})
